import { memo, useCallback, useState } from "react";

/* 问题：使用React.memo()缓存的组件只有当props发生变化时才重新渲染
父组件重新渲染时传递给子组件的函数虽未改变但引用发生了改变导致缓存组件重新渲染*/
// 解决办法：使用useCallback缓存函数
const Input = memo(function Input({ onChange }) {
  console.log("子组件重新渲染了");
  return <input type="text" onChange={(e) => onChange(e.target.value)} />;
});

function App() {
  // 使用useCallback缓存传递给子组件的函数(使其在组件重新渲染时引用不发生变化)
  const changeHandler = useCallback((value) => console.log(value), []);
  // 触发父组件重新渲染的函数
  const [count, setCount] = useState(0);
  return (
    <>
      {/* 将函数作为props传递给子组件，实现父组件和子组件的通信 */}
      <Input onChange={changeHandler}></Input>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </>
  );
}

export default App;
